<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>图片素材列表{:config('APP_NAME')}</title>

    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="__PUBLIC__/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/static/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->

    <link rel="stylesheet" href="__PUBLIC__/static/css/colorbox.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="__PUBLIC__/static/css/ace.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="__PUBLIC__/static/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/static/css/ace-skins.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/static/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="__PUBLIC__/static/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="__PUBLIC__/static/js/ace-extra.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="__PUBLIC__/static/js/html5shiv.js"></script>
    <script src="__PUBLIC__/static/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="no-skin">
{include file="common/header"}
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try{ace.settings.check('main-container' , 'fixed')}catch(e){}
    </script>

    {include file="common/left"}
    <div class="main-content">
        <div class="breadcrumbs  breadcrumbs-fixed" id="breadcrumbs">
            <script type="text/javascript">
                try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">素材管理</a>
                </li>
                <li class="active">图片素材列表</li>
            </ul><!-- /.breadcrumb -->
            <div class="nav-search" id="nav-search">
                <form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="搜索素材" class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
                </form>
            </div><!-- /.nav-search -->
        </div>

        <div class="page-content">


            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div>
                        <ul class="ace-thumbnails clearfix">


                            <li>
                                <a href="http://tva4.sinaimg.cn/crop.63.0.166.166.180/bae1a353jw8epmlhm41eaj208c04oq2y.jpg" data-rel="colorbox">
                                    <img alt="150x150" src="http://tva4.sinaimg.cn/crop.63.0.166.166.180/bae1a353jw8epmlhm41eaj208c04oq2y.jpg" />
                                    <div class="text">
                                        <div class="inner">Sample Caption on Hover</div>
                                    </div>
                                </a>

                                <div class="tools tools-bottom">
                                    <a href="#">
                                        <i class="ace-icon fa fa-link"></i>
                                    </a>

                                    <a href="#">
                                        <i class="ace-icon fa fa-paperclip"></i>
                                    </a>

                                    <a href="#">
                                        <i class="ace-icon fa fa-pencil"></i>
                                    </a>

                                    <a href="#">
                                        <i class="ace-icon fa fa-times red"></i>
                                    </a>
                                </div>
                            </li>




                        </ul>

                    </div>
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
                <div class="space-6"></div>

            </div><!-- /.row -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->

    {include file="common/footer"}XD

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!-- basic scripts -->
{include file="common/base_js"}
<!-- inline scripts related to this page -->
<script src="__PUBLIC__/static/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    !function($){
        "use strict";

        function start_colorbox(){
            var $overflow = '';
            var colorbox_params = {
                rel: 'colorbox',
                reposition:true,
                scalePhotos:true,
                scrolling:false,
                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                close:'&times;',
                current:'{current} of {total}',
                maxWidth:'100%',
                maxHeight:'100%',
                onOpen:function(){
                    $overflow = document.body.style.overflow;
                    document.body.style.overflow = 'hidden';
                },
                onClosed:function(){
                    document.body.style.overflow = $overflow;
                },
                onComplete:function(){
                    $.colorbox.resize();
                }
            };

            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
            $("#cboxLoadingGraphic").append("<i class='ace-icon fa fa-spinner orange'></i>");//let's add a custom loading icon

        }

        $(function(){
            start_colorbox();
        });

    }(jQuery);


</script>
</body>
</html>
